<template>
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="multipleSelection" size="small">
      <el-table-column label="优惠券名称" min-width="140" prop="couponTemplateName" />
      <el-table-column label="类型" min-width="80" prop="productScope">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
        </template>
      </el-table-column>
      <el-table-column label="优惠" min-width="100" prop="discount">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
          {{ discountFormat(scope.row) }}
        </template>
      </el-table-column>

      <el-table-column
        :formatter="validityTypeFormat"
        align="center"
        label="使用时间"
        prop="validityType"
        width="185"
      />
      <el-table-column
        :formatter="validityTypeFormat"
        align="center"
        label="使用范围"
        prop="validityType"
        width="185"
      />
      <!--  方便扩展每个活动配置的属性不一样  -->
      <slot name="extension"> </slot>

      <el-table-column align="center" label="状态" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" v-if="!isDetail" prop="status">
        <template #default="{ row }">
          <el-button link size="small" type="primary" @click="deleteCoupon(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { discountFormat, validityTypeFormat } from '@/views/mall/promotion/coupon/formatter'
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
defineOptions({ name: 'CouponSelect' })

const props = defineProps<{
  multipleSelection: CouponTemplateApi.CouponTemplateVO[]
  isDetail: Boolean
}>()
const emit = defineEmits<{
  (e: 'update:multipleSelection', v: CouponTemplateApi.CouponTemplateVO[])
}>()
const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
  emit('update:multipleSelection', val)
}
const loading = ref(false) // 列表的加载中
/** 删除 sku */
const deleteCoupon = (row) => {
  let list = props.multipleSelection.filter((ele) => {
    return ele.couponTemplateId != row.couponTemplateId
  })

  handleSelectionChange(list)
}
</script>
